<template>
  <div class="gallary">
    <div class="warpper">
      <mt-swipe :auto="0">
        <mt-swipe-item v-for="item in swiperList" :key="item.id">
          <img class="gallary-img" :src="item.imgURL" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
  </div>
</template>
<script>
export default {
  name: "gallary",
  data() {
    return {
      swiperList: [
        {
          id: "001",
          imgURL: "static/img/server/18230958_213457784000_2 (1).jpg"
        },
        {
          id: "002",
          imgURL: "static/img/server/U3722P772DT20111227125629.jpg"
        },
        {
          id: "003",
          imgURL: "static/img/server/2017117093239_79353.gif"
        }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
.gallary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 99;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color #000;

  .warpper {
    width: 100;
    overflow: hidden;
    height: 0;
    width: 100%;
    padding-bottom: 100%;
    // background-color: #000;
    position: relative;

    .gallary-img {
      width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.mint-swipe {
  overflow: hidden;
  width: 100%;
  padding-bottom: 100%;
  height: 0;
//   background-color: #eee;
}

.mint-swipe >>> .mint-swipe-items-wrap {
  overflow: hidden;
  width: 100%;
  padding-bottom: 100%;
  height: 0;
}
// .mint-swipe >>> .mint-swipe-indicators {
//     bottom: -10px;
// }
// .mint-swipe >>> .mint-swipe-indicator {
//     background-color #fff
// }

</style>